<template>
  <div>
    <Table border  :columns="columns" :data="datalist" style="margin-top:10px;">
      <template slot-scope="{ row }" slot="recruit">
        <span v-if="row.recruit === '1'">允许招录</span>
        <span v-if="row.recruit === '0'">停止招录</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" v-if="row.ID != undefined && row.ID != ''" @click="show(row)">修改数量</Button>
        <Button type="success" size="small"style="margin-right: 5px" v-if="row.ID != undefined && row.ID != '' && row.recruit === '1'" @click="stop(row,'0')">停止招录</Button>
        <Button type="warning" size="small"style="margin-right: 5px" v-if="row.ID != undefined && row.ID != '' && row.recruit === '0'" @click="stop(row,'1')">开始招录</Button>
      </template>
    </Table>
    <Row v-if="loading == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Modal v-model="modalShow" title="区县配备" cancel-text="关闭"
           @on-ok="updateQuota()" @on-cancel="cancelModal" ok-text="确定">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">社区工作者配额:</Col>
          <Col span="12" offset="1">
            <Input type="number" v-model="paramData.quota_num" />
<!--            <InputNumber v-model="paramData.quota_num"></InputNumber>-->
          </Col>
        </Row>
      </Form>
    </Modal>

    <Modal v-model="hintShow" title="提示" cancel-text="关闭"
           @on-ok="updateRecruit()" @on-cancel="hintShow = false" ok-text="确定">
      <div style="font-size: 16px;text-align: center">
        <span>{{params.message}}</span>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getCityQuotaList, updateCityQuotaNum, updateCityRecruit } from '@/api/eventlist'
import {iteminf} from "../../../api/eventlist";
export default {
  data () {
    return {
      columns: [
        { title: '区县', key: 'company_name', minWidth: 100, align: 'center' },
        { title: '配额数量', key: 'quota_num', minWidth: 100, align: 'center' },
        { title: '已有数量', key: 'num', minWidth: 100, align: 'center' },
        { title: '招录', slot: 'recruit', minWidth: 100, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 100, align: 'center' }
      ],
      datalist: [],
      loading: true,
      modalShow: false,
      hintShow: false,
      paramData: {},
      params: {}
    }
  },
  methods: {
    init() {
      getCityQuotaList().then(res => {
        if (res.data.errcode === 0) {
          this.loading = false
          this.datalist = res.data.data
          let num = 0
          let quota_num = 0
          this.datalist.forEach(function (item) {
            num = num + item.num
            if (item.quota_num != '未设置') {
              quota_num = quota_num + parseInt(item.quota_num)
            }
          })
          let params = {
            company_name: '合计',
            num: num,
            quota_num: quota_num
          }
          this.datalist.push(params)
        } else {
          this.$Notice.error({ title: '列表获取失败!', desc: res.data.message })
        }
      })
    },
    show (item) {
      this.paramData = item
      this.modalShow = true
    },
    updateQuota () {
      updateCityQuotaNum(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '修改成功', desc: '' })
          this.init()
        } else {
          this.$Notice.error({ title: '操作失败!', desc: res.data.message })
          this.init()
        }
      })
    },
    cancelModal () {
      this.init()
    },
    stop (row,recruit) {
      this.params = row
      this.params.recruit = recruit
      if (this.params.recruit === '1') {
        this.params.message = '是否允许此区县招录社区工作者'
      } else if (this.params.recruit === '0') {
        this.params.message = '是否停止此区县招录社区工作者'
      }
      this.hintShow = true
    },
    updateRecruit () {
      updateCityRecruit(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.$Notice.success({ title: '修改成功', desc: '' })
        } else {
          this.init()
          this.$Notice.error({ title: '操作失败!', desc: res.data.errmsg })
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style>
.item1{
  height: 42px;
  line-height: 40px;
}
</style>
